<template>
  <div class="common-charts-container">
    <div class="wave-container common-charts-item">
      <div class="effect-container">
        <el-button class="waves" size="large">click me</el-button>
        <el-button class="flat-buttons" plain size="large">朴素按钮</el-button>
        <button class="color-button danger">颜色按钮</button>
      </div>
      <div class="bottom-title">
        <span class="card-tag">点击出现波浪效果</span>
      </div>
    </div>
    <div class="wave-container common-charts-item">
      <div class="effect-container water-container">
        <div class="water1"></div>
        <div class="water2"></div>
        <div class="water3"></div>
        <div class="water4"></div>
      </div>
      <div class="bottom-title">
        <span class="card-tag">另一种波浪效果</span>
      </div>
    </div>
    <div class="wave-container common-charts-item">
      <div class="effect-container">
        <h1 @click="animate" class="animate">animate.js</h1>
      </div>
      <div class="bottom-title">
        <span class="card-tag">animate.js插件</span>
      </div>
    </div>
    <div class="wave-container common-charts-item">
      <div class="effect-container">
        <ParticleBtn
          :animating.sync="btnOps.animating"
          :options="btnOps"
          :visible.sync="btnOps.visible"
          cls="btn-cls"
          >click me</ParticleBtn
        >
      </div>
      <div class="bottom-title">
        <span class="card-tag">点击粒子效果</span>
      </div>
    </div>
    <div class="wave-container common-charts-item">
      <div class="play-button-container">
        <div class="play-button" @click="playOrPause">
          <div class="pause">
            <div class="line line_1"></div>
            <div class="line line_2"></div>
          </div>
          <div class="play active">
            <div class="line line_1"></div>
            <div class="line line_2"></div>
            <div class="line line_3"></div>
          </div>
        </div>
      </div>
      <div class="bottom-title">
        <span class="card-tag">暂停/播放的css特效</span>
      </div>
    </div>
  </div>
</template>

<script>
/* 使用一些常见的特效 */
import Waves from "node-waves";
import "node-waves/dist/waves.css";
import "animate.css";
import ParticleEffectButton from "vue-particle-effect-buttons";

export default {
  name: "Effect",
  components: {
    ParticleBtn: ParticleEffectButton
  },
  data() {
    return {
      btnOps: {
        type: "triangle",
        easing: "easeOutQuart",
        size: 6,
        particlesAmountCoefficient: 4,
        oscillationCoefficient: 2,
        color: function() {
          return Math.random() < 0.5 ? "#1627ee" : "#ff383c";
        },
        onComplete: () => {
          console.log("complete");
          setTimeout(() => {
            this.btnOps.visible = true;
          }, 1000 * 2);
        },
        onBegin: () => {
          console.log("begin");
        },
        visible: true,
        animating: false
      }
    };
  },
  mounted() {
    this.initWaves();
  },
  methods: {
    initWaves() {
      Waves.attach(".waves", ["waves-button", "waves-float"]);
      Waves.attach(".flat-buttons", ["waves-button"]);
      Waves.attach(".color-button", [
        "waves-button",
        "waves-float",
        "waves-light"
      ]);
      Waves.init();
    },
    animate() {
      const element = document.querySelector(".animate");
      element.classList.add("animated", "bounceOutLeft");
      element.addEventListener("animationend", () => {
        this.$message.success("动画消失的回调！");
      });
      setTimeout(() => {
        element.classList.remove("animated", "bounceOutLeft");
      }, 2000);
    },
    playOrPause() {
      let pause = document.querySelector(".pause");
      let play = document.querySelector(".play");
      let btn = document.querySelector(".play-button");
      if (play.classList.contains("active")) {
        play.classList.remove("active");
        pause.classList.add("active");
      } else {
        pause.classList.remove("active");
        play.classList.add("active");
      }
    }
  }
};
</script>

<style scoped lang="scss">
@-webkit-keyframes wateranimate {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

@keyframes wateranimate {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

.wave-container {
  display: flex;
  flex-direction: column;

  .danger {
    padding: 0.85em 1.1em;
    border-radius: 0.2em;
    background-color: rgb(255, 91, 106);
    color: #ffffff;
    margin: 0 10px;
  }

  .effect-container {
    flex: 1;
    box-sizing: border-box;
    padding: 15px;

    .animate {
      color: #f35626;
      background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 6rem;
      line-height: 1;
      cursor: pointer;
    }
  }

  /* 暂停播放按钮样式 */
  .play-button-container {
    flex: 1;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .play-button {
      width: 80px;
      height: 80px;
      position: relative;
      border-radius: 50%;
      overflow: hidden;
      .line {
        position: absolute;
        width: 8px;
        height: 50%;
        background: #000;
        border-radius: 10px;
        transition: all 400ms cubic-bezier(0.8, 0, 0.33, 1);
      }
      .pause,
      .play {
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: absolute;
      }
      .pause {
        .line {
          &_1 {
            margin: 25% 0;
            left: 28%;
          }
          &_2 {
            margin: 100% -16%;
            right: 45%;
            transition-delay: 200ms;
          }
        }

        &.active {
          .line {
            opacity: 1;
            &_1 {
              margin: 25% 0;
              left: 28%;
            }
            &_2 {
              margin: 25% 0;
              right: 28%;
            }
          }
        }
      }
      .play {
        .line {
          margin: 25% 0;
          &_1 {
            left: 28%;
          }
          &_2 {
            height: 56%;
            left: 60%;
            transform: rotate(-55deg) translateY(-128px) translateX(16px);
            transition-delay: 100ms;
          }
          &_3 {
            height: 56%;
            left: 60%;
            transform: rotate(55deg) translateY(-128px) translateX(16px);
            transition-delay: 200ms;
          }
        }
        &.active {
          .line {
            opacity: 1;
            height: 62%;
            margin: 20% 0;
            &_1 {
              left: 28%;
              transform: translateY(-2px);
            }
            &_2 {
              height: 56%;
              left: 63%;
              transform: rotate(-55deg) translateY(-16.5px) translateX(2px);
            }
            &_3 {
              height: 56%;
              left: 63%;
              transform: rotate(55deg) translateY(16px) translateX(2px);
            }
          }
        }
      }
    }
  }

  .bottom-title {
    background: #f7f9fa;
    border-top: 1px solid #f4f4f4;
    text-align: left;
    padding: 8px 4px;
    height: 38px;
    box-sizing: border-box;
  }

  .water-container {
    position: relative;

    .water1 {
      -webkit-animation: wateranimate 12s 9s ease-out infinite;
      animation: wateranimate 12s 9s ease-out infinite;
    }

    .water2 {
      -webkit-animation: wateranimate 12s 6s ease-out infinite;
      animation: wateranimate 12s 6s ease-out infinite;
    }

    .water3 {
      -webkit-animation: wateranimate 12s 3s ease-out infinite;
      animation: wateranimate 12s 3s ease-out infinite;
    }

    .water4 {
      -webkit-animation: wateranimate 12s 0s ease-out infinite;
      animation: wateranimate 12s 0s ease-out infinite;
    }

    .water1,
    .water2,
    .water3,
    .water4 {
      padding: 20%;
      position: absolute;
      left: 30%;
      top: 20%;
      border: 1px solid pink;
      box-shadow: 0 0 120px 30px rgba(235, 31, 137, 1) inset;
      border-radius: 100%;
      z-index: 1;
      opacity: 0;
    }
  }
}
</style>
<!--全局的样式-->
<style>
.btn-cls {
  background-color: #ee7752 !important;
  color: white;
}
</style>
